<template>
  <div class="ChatView">
    <div class="ChatViewContent">
      <ChatContent :beSelectChat="beSelectChat" ref="ChatContentRef" />
      <ChatPanel ref="ChatPanelRef" />
    </div>
  </div>
  <DragSelect @select="select" :disabled="disabled" @confirm="confirm" :elements="ChatContentRef.ChatItems!"
    v-if="ChatContentRef?.ChatContent" :to="ChatContentRef.ChatContent" />
</template>

<script setup lang='ts'>
import ChatContent from '~/components/Chat/ChatContent/ChatContent.vue'
import ChatPanel from '~/components/Chat/ChatPanel/ChatPanel.vue'
const ChatContentRef = ref<InstanceType<typeof ChatContent> | null>()
const ChatPanelRef = ref<InstanceType<typeof ChatPanel> | null>()
const { beSelectChat, disabled } = useDragSelectAction()
const select = (eles: HTMLElement[]) => {
  beSelectChat.value = eles.map(e => e.id)
}
const confirm = () => {
  if (beSelectChat.value.length === 0) return
  disabled.value = true
  ChatPanelRef.value!.showSelectAction()
}
</script>

<style lang="scss">
.ChatView {
  width: 100%;
  height: 100%;
}

.ChatViewContent {
  display: flex;
  margin: 0 auto;
  height: calc(100vh - 50px);
  flex-direction: column;
}
</style>
